<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="end">
          <el-button type="primary" size="medium" @click="add(null, 'add')">新增员工</el-button>
        </el-row>
        <el-divider />
        <el-table :data="employeesList" border>
          <el-table-column prop="username" align="center" label="姓名" />
          <el-table-column prop="email" align="center" label="邮箱" />
          <el-table-column align="center" label="操作">
            <template v-slot="{row}">
              <el-button size="mini" type="primary" plain @click="assignRole(row.id)">设置角色</el-button>
              <el-button size="mini" plain @click="edit(row.id, 'edit')">编辑</el-button>
              <el-button size="mini" type="danger" plain @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          />
        </el-row>
      </el-card>
      <!-- 新增/编辑员工弹窗 -->
      <el-dialog title="新增员工" :visible="showDialog" @close="close">
        <el-form ref="form" :model="formData" :rules="rules">
          <el-form-item label="员工名称" label-width="120px" prop="username">
            <el-input v-model="formData.username" style="width: 80%" />
          </el-form-item>
          <el-form-item label="员工邮箱" label-width="120px" prop="email">
            <el-input v-model="formData.email" style="width: 80%" />
          </el-form-item>
          <el-form-item v-if="openTitle === 'add'" label="员工密码" label-width="120px" prop="password">
            <el-input v-model="formData.password" style="width: 80%" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" plain @click="submit">确 定</el-button>
          <el-button size="mini" plain @click="close">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 角色分配 -->
      <AssignRole :id="formData.id" ref="role" :show-assign-dialog.sync="showAssignDialog" />
    </div>
  </div>
</template>

<script>
import { deleteEmployee, employeeDetails, getEmployee, getEmployeeCount, updateEmployee } from '@/api/employee'
import { registerApi } from '@/api/user'
import AssignRole from './components/assign-role.vue'
export default {
  components: { AssignRole },
  data() {
    return {
      employeesList: [], // 员工列表
      limit: 5, // 每页的获取条数
      start: 0, // 开始获取的位置
      total: 0, // 总数量
      showDialog: false, // 控制员工弹窗
      openTitle: '', // 弹窗标题
      formData: {
        id: null,
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '员工名称不能为空', trigger: 'blur' }],
        email: [
          { required: true, message: '员工邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
        ],
        password: [{ required: true, message: '员工密码不能为空', trigger: 'blur' }]
      },
      showAssignDialog: false // 控制角色分配弹窗
    }
  },
  created() {
    this.getEmployeesList()
    this.getCount()
  },
  methods: {
    // 获取员工列表
    async getEmployeesList() {
      const res = await getEmployee({
        _limit: this.limit,
        _start: this.start
      })
      this.employeesList = res.data
    },
    // 获取员工数量
    async getCount() {
      const res = await getEmployeeCount()
      this.total = res.data * 2
    },
    // 分页功能
    currentPage(val) {
      this.start = (val - 1) * this.limit
      this.getEmployeesList()
    },
    // 新增按钮
    add(id, txt) {
      this.openTitle = txt
      this.showDialog = true
    },
    // 编辑按钮 --- 数据回显
    async edit(id, txt) {
      if (id) {
        this.openTitle = txt
        const res = await employeeDetails(id)
        this.formData = { ...res.data }
        this.showDialog = true
      }
    },
    // 关闭弹窗
    close() {
      this.showDialog = false
      // 清空表单
      this.formData = {
        username: '',
        email: '',
        password: ''
      }
    },
    // 确认按钮
    async submit() {
      // 表单校验
      await this.$refs.form.validate()
      if (this.openTitle === 'add') {
        // 调用添加（注册）用户接口
        await registerApi(this.formData)
        // 提示
        this.$message.success('添加员工成功')
      } else {
        // 调用编辑员工接口
        await updateEmployee(this.formData)
        // 提示
        this.$message.success('修改员工成功')
      }
      // 刷新页面
      this.getEmployeesList()
      this.getCount()
      // 退出弹窗
      this.close()
    },
    // 删除
    del(id) {
      this.$confirm('确定删除该员工吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用删除接口
        await deleteEmployee(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 刷新页面
        this.getEmployeesList()
        this.getCount()
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 设置角色按钮
    assignRole(id) {
      if (id) {
        this.formData.id = id
        this.$nextTick(() => {
          this.$refs.role.employeeDetails()
        })
      }
      this.showAssignDialog = true
    }
  }
}
</script>

<style>

</style>
